<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>05兄弟元素选择器</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        ul ul{
            border:1px dashed gray;
        }
        ul ~ li{/*ul后面的所有兄弟li元素*/
            background-color: lightpink;
        }
    </style>
</head>
<body>
<h1>1-5兄弟元素选择器</h1>
<h3>选中了ul后面的所有兄弟li元素，背景色变为浅粉红</h3>
<strong>选择器：</strong><code>ul ~ li</code>
<ul>
    <li>这是li元素</li>
    <li>这是li元素</li>

        <ul>这里是内嵌ul列表
            <li>这是内层的li元素</li>
            <li>这是内层的li元素</li>
            <li>这是内层的li元素</li>
            <li>这是内层的li元素</li>
        </ul>

    <li>这是li元素</li>
    <li>这是li元素</li>
    <li>这是li元素</li>
    <li>这是li元素</li>
</ul>
</body>
</html>